<template>
  <border class="current-year-lease-trend"
          :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content"
         slot="module-content">
      <div class="module-content-t">
        <div class="u-message">
          <message v-for="(item, index) in messageLeft"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"></message>
        </div>
        <div class="u-message right">
          <message v-for="(item, index) in messageRight"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"
                   :messageClassName="item.messageClassName"></message>
        </div>
      </div>
      <div class="module-content-b">
        <div class="u-chart">
          <barLine ref="barLine"
                   :tooltip="moduleConfig.optionsConfig.tooltip"
                   :legend="moduleConfig.optionsConfig.legend"
                   :grid="moduleConfig.optionsConfig.grid"
                   :xAxis="moduleConfig.optionsConfig.xAxis"
                   :yAxis="moduleConfig.optionsConfig.yAxis"
                   :seriesData="moduleConfig.optionsConfig.series"></barLine>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../../components/Border.vue'
import Message from './../../assetsManagement/components/Message.vue'
import barLine from './../../assetsManagement/components/BarLine.vue'
export default {
  name: 'currentYearContractChanges',
  components: {
    Border,
    Message,
    barLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '本年签约变化'
      },
      moduleConfig: {
        optionsConfig: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新签合同', '终止合同', '净增面积']
          },
          grid: {
            top: 10
          },
          xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }],
          yAxis: [{
            name: '',
            type: 'value'
          }],
          series: []
        }
      },
      messageLeft: [{
        messageName: '新签面积(m²)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '续签面积(m²)',
        messageNumber: 0,
        messageUnit: ''
      }],
      messageRight: [{
        messageName: '退租面积(m²)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '净增面积(m²)',
        messageNumber: 0,
        messageUnit: '',
        messageClassName: 'positive'
      }]
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  methods: {
    getData () {
      let self = this
      // let res = {
      //   data: {
      //     "code": "0",
      //     "msg": "查询成功!",
      //     "data":{
      //       "signedArea":1000, // "新签面积",
      //       "renewArea": 2000, // "续签面积",
      //       "unrentArea": 130, // 退租面积
      //       "netIncreasedArea": 1300, // 净增面积
      //       "resultList":[{
      //         "id":"",
      //         "name":"1月",
      //         "signedArea": 100, // "新签面积",
      //         "renewArea": 100, // "续签面积",
      //         "unrentArea": 60, // "退租面积",
      //         "netIncreasedArea": 200, // "净增面积"
      //       }, {
      //         "id":"",
      //         "name":"2月",
      //         "signedArea": 60,
      //         "renewArea": 10,
      //         "unrentArea": 20,
      //         "netIncreasedArea": 80,
      //       }]
      //     }
      //   }
      // }
      self.assetsManagementApi.signedChange({ organId: self.organId, typeId: '' }).then(res => {
        if (res.data.code === '0') {
          let resData = res.data.data || {}
          self.messageLeft[0].messageNumber = resData.signedArea
          self.messageLeft[1].messageNumber = resData.renewArea
          self.messageRight[0].messageNumber = resData.unrentArea
          self.messageRight[1].messageNumber = resData.netIncreasedArea
          self.unitPrice = resData.unitPrice
          let xAxis = []
          let signedArea = []
          let renewArea = []
          let unrentArea = []
          let netIncreasedArea = []
          let resultList = resData.resultList || []
          let maxId = resultList.length > 0 ? (resultList[resultList.length - 1].id || 0) : 0
          let maxMonth = new Date().getMonth() + 1
          maxId = maxId < maxMonth ? maxMonth : maxId
          for (let i = 0; i < maxId; i++) {
            xAxis.push((i + 1) + '月')
            signedArea.push('')
            renewArea.push('')
            unrentArea.push('')
            netIncreasedArea.push('')
          }
          resultList.forEach(v => {
            if (v.id) {
              signedArea[v.id - 1] = v.signedArea
              renewArea[v.id - 1] = v.renewArea
              unrentArea[v.id - 1] = v.unrentArea
              if (Number(v.netIncreasedArea) < 0) {
                netIncreasedArea[v.id - 1] = {
                  value: v.netIncreasedArea,
                  itemStyle: {
                    normal: {
                      color: '#31e883'
                    }
                  }
                }
              } else {
                netIncreasedArea[v.id - 1] = v.netIncreasedArea
              }
            }
          })
          self.moduleConfig.optionsConfig.xAxis[0].data = xAxis
          self.moduleConfig.optionsConfig.series = []
          self.moduleConfig.optionsConfig.series = [{
            name: '新签合同',
            type: 'line',
            data: signedArea
          }, {
            name: '终止合同',
            type: 'line',
            data: unrentArea
          }, {
            name: '净增面积',
            type: 'bar',
            data: netIncreasedArea
          }]
        } else {
          self.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        self.$parent.showTips('请求失败，点击确认继续刷新')
      })
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
.current-year-lease-trend {
  .module-content {
    width: 100%;
    height: 100%;

    .module-content-t {
      width: 100%;
      &:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
      }
      > .u-message {
        float: left;
        width: 31%;
        padding-left: 1%;
        &.right {
          float: right;
          padding-left: 0;
          padding-right: 1%;
        }
        .message {
          width: calc((100% - 20px) / 2);
          margin: 5px;
          float: left;
        }
      }
    }

    .module-content-b {
      width: 100%;
      height: calc(100% - 70px);

      > .u-chart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
